<template>
  <div class="list">
    <bk-header></bk-header>
    <bk-search @search="search"></bk-search>
    <bk-cartline></bk-cartline>
    <Row type="flex" class="content">
      <Col gutter="20" v-for="goods in goodss" :key="goods.id">
        <goods-pic :goods="goods"></goods-pic>
      </Col>
      <p v-if="goodss.length === 0" style="text-align:center;">
        没有搜索到任何相关信息 <router-link to="/"> 看看其他</router-link>
      </p>
    </Row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      key: "",
      goodss: []
    };
  },
  mounted() {
    const key = this.$route.query.key;
    const type = this.$route.query.type;
    if (type === "type") {
      this.$api.goods.getGoods(key).then(data => {
        this.goodss = data.list;
      });
    } else {
      this.search(key);
    }
  },
  methods: {
    search(key) {
      this.$api.goods.search(key).then(data => {
        this.goodss = data.list;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  margin: 30px 15%;
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 10px #fff;
  min-height: 400px;
  width: 960px;
}
</style>
